<template>
  <section class="section section-container">
    <div class="step" v-for="step in steps" :key="step.index">
      <div class="step-title">{{ step.title }}</div>
      <div class="step-content">
        <img :src="step.image" alt="">
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { useMessage } from "naive-ui";
import { shallowRef } from "vue";
import image1 from "@/app/web/assets/step1.png";
import image2 from "@/app/web/assets/step2.png";
import image3 from "@/app/web/assets/step3.png";
import image4 from "@/app/web/assets/step4.png";
import image5 from "@/app/web/assets/step5.png";
import image6 from "@/app/web/assets/step6.png";

// 操作文档步骤
const steps = shallowRef([
  { index: 1, title: "1. 进入登录、注册页面；", image: image1 },
  { index: 2, title: "2. 首次登录，请先注册账号；", image: image2 },
  { index: 3, title: "3. 使用手机号注册你的账号；", image: image3 },
  { index: 4, title: "4. 登录后进入管理系统；", image: image4 },
  { index: 5, title: "5. 开始编辑你的第一张图片；", image: image5 },
  { index: 6, title: "6. 可以管理你的图片；", image: image6 },
]);

const message = useMessage();
const channel = new BroadcastChannel("wicket");
channel.addEventListener("message", (event) => {
  message.success(event.data, {
    duration: 0,
  });
});
</script>

<style lang="less" scoped>
.section {
  padding-top: 220px;
  padding-bottom: 220px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  color: #ffffff;
  text-align: center;

  .step {
    display: flex;
    line-height: 40px;
    flex-direction: column;
    text-align: left;
    font-weight: bold;
    margin-bottom: 30px;

    &-content {
      border: 2px solid #fff;
      border-radius: 4px;
      > img {
        width: 100%;
      }
    }
  }
}
</style>
